<template>
  <div class="home">
    <div class="hero">
      <div class="hero__content">
        <h1 class="hero__title">欢迎来到 Vue3 优雅模板</h1>
        <p class="hero__subtitle">一个美观、现代化的 Vue3 项目模板，专为快速构建企业级应用而设计</p>
        <div class="hero__actions">
          <AdvancedButton type="primary" size="large" @click="goToAbout">了解更多</AdvancedButton>
          <AdvancedButton type="default" size="large" @click="goToContact" class="hero__btn">联系我们</AdvancedButton>
        </div>
      </div>
      <div class="hero__image">
        <div class="hero__image-placeholder"></div>
      </div>
    </div>
    
    <div class="section">
      <h2 class="section__title">项目特色</h2>
      <div class="grid grid--3-cols">
        <AdvancedCard v-for="feature in features" :key="feature.title">
          <template #header>
            <h3 v-text="feature.title"></h3>
          </template>
          <p v-text="feature.description"></p>
        </AdvancedCard>
      </div>
    </div>
    
    <div class="section">
      <h2 class="section__title">组件展示</h2>
      <div class="section__content">
        <div class="grid grid--2-cols">
          <AdvancedCard>
            <template #header>
              <h3>按钮组件</h3>
            </template>
            <div class="component-demo">
              <AdvancedButton type="default">默认按钮</AdvancedButton>
              <AdvancedButton type="primary">主要按钮</AdvancedButton>
              <AdvancedButton type="success">成功按钮</AdvancedButton>
              <AdvancedButton type="warning">警告按钮</AdvancedButton>
              <AdvancedButton type="danger">危险按钮</AdvancedButton>
            </div>
            <div class="component-demo">
              <AdvancedButton size="small">小型按钮</AdvancedButton>
              <AdvancedButton size="medium">中型按钮</AdvancedButton>
              <AdvancedButton size="large">大型按钮</AdvancedButton>
            </div>
          </AdvancedCard>
          
          <AdvancedCard>
            <template #header>
              <h3>表单组件</h3>
            </template>
            <AdvancedForm @submit="handleSubmit">
              <AdvancedFormItem label="用户名" required>
                <AdvancedInput v-model="form.username" placeholder="请输入用户名" />
              </AdvancedFormItem>
              <AdvancedFormItem label="邮箱" required>
                <AdvancedInput v-model="form.email" type="email" placeholder="请输入邮箱" />
              </AdvancedFormItem>
              <AdvancedFormItem>
                <AdvancedButton type="primary" :loading="form.loading">提交</AdvancedButton>
              </AdvancedFormItem>
            </AdvancedForm>
          </AdvancedCard>
        </div>
        
        <div class="grid grid--2-cols">
          <AdvancedCard>
          <template #header>
            <h3>提示组件</h3>
          </template>
          <AdvancedAlert type="info">这是一条信息提示</AdvancedAlert>
          <AdvancedAlert type="success">这是一条成功提示</AdvancedAlert>
          <AdvancedAlert type="warning">这是一条警告提示</AdvancedAlert>
          <AdvancedAlert type="error" closable>这是一条错误提示</AdvancedAlert>
          
          <!-- 新增提醒和模态框示例 -->
          <div class="component-demo">
            <h4>提醒组件示例</h4>
            <AdvancedAlert type="success" dismissible :duration="5000">这是一条成功的提醒信息</AdvancedAlert>
            <AdvancedAlert type="info" dismissible>这是一条信息提醒</AdvancedAlert>
            <AdvancedAlert type="warning" dismissible>这是一条警告提醒</AdvancedAlert>
            <AdvancedAlert type="error" dismissible>这是一条错误提醒</AdvancedAlert>
          </div>
          
          <div class="component-demo">
            <h4>模态框组件示例</h4>
            <AdvancedButton @click="showModal = true">打开模态框</AdvancedButton>
            <AdvancedModal 
              v-model:visible="showModal" 
              title="模态框示例" 
              closable 
              centered
              width="400px"
            >
              <p>这是一个模态框示例内容。</p>
              <p>您可以在这里放置任何内容。</p>
              <template #footer>
                <AdvancedButton @click="showModal = false">取消</AdvancedButton>
                <AdvancedButton type="primary" @click="showModal = false">确定</AdvancedButton>
              </template>
            </AdvancedModal>
          </div>
        </AdvancedCard>
          
          <AdvancedCard>
            <template #header>
              <h3>进度条组件</h3>
            </template>
            <div class="component-demo">
              <AdvancedProgress :percentage="30" type="primary" show-text />
              <AdvancedProgress :percentage="50" type="success" show-text />
              <AdvancedProgress :percentage="70" type="warning" show-text />
              <AdvancedProgress :percentage="90" type="danger" show-text />
            </div>
          </AdvancedCard>
        </div>
      </div>
    </div>
    
    <div class="section">
      <h2 class="section__title">技术栈</h2>
      <div class="grid grid--3-cols">
        <AdvancedCard v-for="item in galleryItems" :key="item.id" :clickable="true" @click="handleCardClick(item)">
          <img :src="item.image" :alt="item.title" class="tech-image">
          <h3 v-text="item.title"></h3>
          <p v-text="item.description"></p>
        </AdvancedCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import AdvancedButton from '@/components/AdvancedButton.vue'
import AdvancedCard from '@/components/AdvancedCard.vue'
import AdvancedProgress from '@/components/AdvancedProgress.vue'
import AdvancedAlert from '@/components/AdvancedAlert.vue'
import AdvancedModal from '@/components/AdvancedModal.vue'
const router = useRouter()

const features = ref([
  {
    title: 'Vue 3 Composition API',
    description: '基于 Vue 3 Composition API 构建，提供更好的开发体验和代码组织方式'
  },
  {
    title: 'Vite 构建工具',
    description: '使用 Vite 作为构建工具，提供极快的开发服务器启动速度和热更新'
  },
  {
    title: '响应式设计',
    description: '支持桌面端、平板端和移动端的响应式布局，适配各种设备'
  },
  {
    title: '组件化架构',
    description: '遵循组件化设计原则，实现高内聚低耦合的代码结构'
  }
])

const galleryItems = ref([
  {
    id: 1,
    title: '现代化架构',
    description: '采用最新的前端技术栈，保证项目的技术先进性',
    image: 'https://picsum.photos/300/200?random=1'
  },
  {
    id: 2,
    title: '组件化开发',
    description: '遵循组件化设计原则，提高代码复用性和可维护性',
    image: 'https://picsum.photos/300/200?random=2'
  },
  {
    id: 3,
    title: '易于扩展',
    description: '清晰的项目结构，便于后续功能扩展和维护',
    image: 'https://picsum.photos/300/200?random=3'
  }
])

const form = ref({
  username: '',
  email: '',
  loading: false
})

const showModal = ref(false)

const goToAbout = () => {
  router.push('/about')
}

const goToContact = () => {
  router.push('/contact')
}

const handleSubmit = () => {
  form.value.loading = true
  // 模拟提交过程
  setTimeout(() => {
    form.value.loading = false
    alert(`感谢您的提交，${form.value.username}！`)
    form.value.username = ''
    form.value.email = ''
  }, 1000)
}

const handleCardClick = (item) => {
  alert(`您点击了 ${item.title}`)
}
</script>

<style scoped>
.home {
  padding: 2rem 0;
}

.hero {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero__content {
  flex: 1;
  min-width: 300px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hero__subtitle {
  font-size: 1.3rem;
  max-width: 600px;
  margin: 0 0 2rem;
  line-height: 1.6;
  opacity: 0.9;
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__btn {
  margin-left: 0 !important;
}

.hero__image {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero__image-placeholder {
  width: 100%;
  max-width: 400px;
  height: 300px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero__image-placeholder::before {
  content: 'Vue3 优雅模板';
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  font-weight: 600;
}

.hero__image-placeholder::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: rotate(45deg) translateX(-100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}

.section {
  margin-bottom: 3rem;
  animation: fadeIn 0.6s ease-out;
}

.section__title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
  position: relative;
}

.section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0.8rem auto;
  border-radius: 2px;
}

.component-demo {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.component-demo:last-child {
  margin-bottom: 0;
}

.tech-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.tech-image:hover {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    padding: 2rem 1rem;
  }
  
  .hero__title {
    font-size: 2.2rem;
  }
  
  .hero__subtitle {
    font-size: 1.1rem;
  }
  
  .hero__actions {
    justify-content: center;
  }
  
  .component-demo {
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .section__title {
    font-size: 1.7rem;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 1.8rem;
  }
  
  .hero__subtitle {
    font-size: 1rem;
  }
  
  .hero__actions {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .section__title {
    font-size: 1.5rem;
  }
}
</style>